<template>
    <div>
        <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="success" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList: []
        };
    },
    methods: {
        success(response, file, fileList) {
            this.$message({
                message: '恭喜你，图片上传成功',
                type: 'success'
            });
            //将返回的url给到父组件
            this.$emit('sendImg',response.imgUrl)
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }
    }
}
</script>

<style scoped lang="less"></style>
